<template>
  <el-row :gutter="40"
          class="panel-group">
    <el-col :xs="4"
            :sm="4"
            :lg="4"
            class="card-panel-col"
            v-for="(item, index) in dataList"
            :key="index">
      <el-card shadow="hover"
               class="card-panel-wrapper">
        <div class="card-panel-icon-wrapper"
             :class="{'icon-color' : item.type}">
          <i :class="item.icon"
             class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">{{ item.title }}</div>
          <span class="card-panel-num">{{ item.value }}</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
export default {
  props: {
    dataList: {
      type: Array
    }
  }
}
</script>

<style lang="scss">
.card-panel-wrapper {
  .el-card__body {
    display: flex;
    .card-panel-icon-wrapper {
      flex: 1;
      text-align: center;
      vertical-align: middle;
      font-size: 30px;
      margin-right: 10px;
    }
    .icon-color {
      color: greenyellow;
    }
    .card-panel-description {
      flex: 3;
    }
  }
}
</style>
